<template>
    <div>
        <div style="margin: 1vh; padding: 1vh; height: 40vh; font-size: 20px; border: 1px solid #bfbfbf; border-radius: 10px;">
            <div style="text-align: center; background-color: #69b1ff; color: white; border-radius: 5px;">可选择</div>
            <span style="display: inline-block; margin: 5px 5px 5px 0px; padding: 0px 5px;" v-for="tag in oldbotags" :key="tag.sname + tag.tagclass" :class="tag.tagclass" @click="checktag(tag.sname, tag.tagclass, tag.id)">
                {{ tag.sname }}
            </span>
            <span style="display: inline-block; margin: 5px 5px 5px 0px; padding: 0px 5px;" v-for="tag in newbotags" :key="tag.sname + tag.tagclass" :class="tag.tagclass" @click="checktag(tag.sname, tag.tagclass)">
                {{ tag.sname }}
            </span>
            <br />
            <span class="tag tag-large tag-gray-light" @click="showname">
                <van-icon name="plus" />
                新增
            </span>
        </div>
        <div style="text-align: center; font-size: 3vh; color: #8c8c8c;">
            <span @click="uncheckall">
                <van-icon name="arrow-up" />
                全部删除
            </span>
            <span @click="checkall">
                <van-icon name="arrow-down" />
                全部添加
            </span>
        </div>
        <div style="margin: 1vh; padding: 1vh; height: 40vh; font-size: 20px; border: 1px solid #bfbfbf; border-radius: 10px;">
            <div style="text-align: center; background-color: #69b1ff; color: white; border-radius: 5px;">已选择</div>
            <span style="display: inline-block; margin: 5px 5px 5px 0px; padding: 0px 5px;" v-for="tag in selectedtags" :key="tag.sname + tag.tagclass" :class="tag.tagclass" @click="unchecktag(tag.sname, tag.tagclass)">
                {{ tag.sname }}
                <van-icon name="cross" />
            </span>
        </div>
        <van-dialog v-model="classshow" title="标签样式" show-cancel-button :lazy-render="false" @confirm="checkedclass">
            <div style="padding: 5px;">
                <span style="margin: 0px 0px 0px 5px;">
                    <span>预览：</span>
                    <span :class="classtext">{{ nametext }}</span>
                </span>
                <br />
                <div style="padding: 10px 0px; line-height: 35px;">
                    <span v-for="spanclass in classList" :key="spanclass" :class="spanclass" @click="changeclasstext(spanclass)">
                        默认样式
                    </span>
                </div>
            </div>
        </van-dialog>
        <van-dialog v-model="nameshow" title="标签内容" show-cancel-button :lazy-render="false" @confirm="showclass">
            <van-field type="textarea" v-model="nametext" rows="2" autosize autofocus placeholder="请输入标签内容" show-word-limit class="message" />
        </van-dialog>

        <van-tabbar v-model="active" safe-area-inset-bottom>
            <van-tabbar-item @click="cancel">取消</van-tabbar-item>
            <van-tabbar-item @click="submit">提交</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import Vue from 'vue'
import qs from 'qs'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, DatetimePicker, ActionSheet, Tab, Tabs, Collapse, CollapseItem, Dialog, Uploader, Rate, Icon, Form, Sticky, Image, Loading, Step, Steps } from 'vant'
Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(DatetimePicker).use(ActionSheet).use(Tab).use(Tabs).use(Collapse).use(CollapseItem).use(Dialog).use(Uploader).use(Rate).use(Icon).use(Form).use(Sticky).use(Image).use(Loading).use(Step).use(Steps)
export default {
    name: 'newtag',
    data () {
        return {
            active: 1,
            classList: [
                'tag tag-large tag-red-deep', 'tag tag-large tag-red-light', 'tag tag-large tag-orange-deep', 'tag tag-large tag-orange-light', 'tag tag-large tag-yellow-deep', 'tag tag-large tag-yellow-light',
                'tag tag-large tag-green-deep', 'tag tag-large tag-green-light', 'tag tag-large tag-cyan-deep', 'tag tag-large tag-cyan-light', 'tag tag-large tag-blue-deep', 'tag tag-large tag-blue-light',
                'tag tag-large tag-purple-deep', 'tag tag-large tag-purple-light', 'tag tag-large tag-pink-deep', 'tag tag-large tag-pink-light', 'tag tag-large tag-gray-deep', 'tag tag-large tag-gray-light'
            ],
            selectedtags: this.$route.query.tags,
            oldbotags: this.$route.query.botags,
            bo: this.$route.query.bo,
            id: this.$route.query.id,
            newbotags: [],
            classshow: false,
            nameshow: false,
            nametext: '',
            classtext: 'tag tag-large tag-red-deep'
        }
    },
    mounted () {
        // this.newbotags.push({ id: '1', sname: '11111', sobject: 'account', tagclass: 'tag tag-large tag-red-deep' })
    },
    methods: {
        checktag (sname, tagclass, id) {
            // //console.log(sname, tagclass)
            for (let i = 0; i < this.selectedtags.length; i++) {
                if (this.selectedtags[i].sname === sname && this.selectedtags[i].tagclass === tagclass) {
                    Toast('标签已选择')
                    return
                }
            }
            this.selectedtags.push({ sname: sname, tagclass: tagclass, id: id })
        },
        unchecktag (sname, tagclass) {
            // //console.log(sname, tagclass)
            for (let i = 0; i < this.selectedtags.length; i++) {
                if (this.selectedtags[i].sname === sname && this.selectedtags[i].tagclass === tagclass) {
                    this.selectedtags.splice(i, 1)
                    return
                }
            }
        },
        checkall () {
            this.selectedtags = []
            this.selectedtags.push(...this.oldbotags)
            this.selectedtags.push(...this.newbotags)
        },
        uncheckall () {
            this.selectedtags = []
        },
        checkedclass () {
            for (let i = 0; i < this.oldbotags.length; i++) {
                if (this.oldbotags[i].sname === this.nametext && this.oldbotags[i].tagclass === this.classtext) {
                    Toast('标签已存在')
                    this.nametext = ''
                    return
                }
            }
            for (let i = 0; i < this.newbotags.length; i++) {
                if (this.newbotags[i].sname === this.nametext && this.newbotags[i].tagclass === this.classtext) {
                    Toast('标签已存在')
                    this.nametext = ''
                    return
                }
            }
            this.newbotags.push({ sname: this.nametext, tagclass: this.classtext })
            this.nametext = ''
        },
        showclass () {
            if (this.nametext) {
                this.classshow = true
            } else {
                Toast('请输入标签内容')
            }
        },
        showname () {
            this.nameshow = true
        },
        changeclasstext (classtext) {
            this.classtext = classtext
        },
        cancel () {
            this.$router.go(-1)
        },
        submit () {
            var _this = this
            let newbotagstemp = [] // 新标签 不包括已选择新标签
            let checkednewtagstemp = [] // 已选择新标签
            let checkedtagstemp = [] // 已选择旧标签

            for (let i = 0; i < this.selectedtags.length; i++) {
                let isnew = false
                for (let j = 0; j < this.newbotags.length; j++) {
                    if (this.selectedtags[i].sname === this.newbotags[j].sname && this.selectedtags[i].tagclass === this.newbotags[j].tagclass) {
                        checkednewtagstemp.push(this.selectedtags[i])
                        isnew = true
                    }
                }
                if (!isnew) {
                    checkedtagstemp.push(this.selectedtags[i])
                }
            }

            for (let i = 0; i < this.newbotags.length; i++) {
                let isselected = false
                for (let j = 0; j < checkednewtagstemp.length; j++) {
                    if (this.newbotags[i].sname == checkednewtagstemp[j].sname && this.newbotags[i].tagclass == checkednewtagstemp[j].tagclass) {
                        isselected = true
                    }
                }
                if (!isselected) {
                    newbotagstemp.push(this.newbotags[i])
                }
            }

            let data = {
                newtags: JSON.stringify(newbotagstemp),
                selectedtags: JSON.stringify(checkedtagstemp),
                selectednewtags: JSON.stringify(checkednewtagstemp),
                bo: this.bo,
                scode: this.id
            }

            this.axios({
                method: 'post',
                url: '/api/tags.editsave.do',
                data: qs.stringify(data)
            }).then(res => {
                //console.log(res)
                this.$store.commit('listreload')
                this.$router.go(-1)
            }).catch(res => {
                this.reserror(res)
            })
        }
    }
}
</script>
